<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>地市指标最优指标</title>
    <link rel="stylesheet" href="../source/bootstrap-3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../source/bootstrap-table-1.11.1/bootstrap-table.min.css">
    <script src="../source/jquery/jquery-1.10.2.min.js"></script>
    <script src="../source/bootstrap-3.3.7/js/bootstrap.min.js"></script>
    <script src="../source/bootstrap-table-1.11.1/bootstrap-table.js"></script>
    <script src="../source/bootstrap-table-1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="../source/iconfont/iconfont.js"></script>
    <script src="../source/echarts.min.js"></script>
   <!-- <script src="../source/echarts-all-2.js"></script>-->

    <!-- <script src="../source/echarts-all.js"></script>-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style>
        .icon {
            width: 1em;
            height: 1em;
            vertical-align: -0.15em;
            fill: currentColor;
            overflow: hidden;
            font-size: 20px;
            line-height: 30px;
            margin-right: 0px;
            margin-left: 0px;
        }

        #table1 td {
            height: 30px;
            padding: 6px;
        }

        #table1 thead {
            color: #ffffff;
        }

        .th-inner {
            height: 36px;
            border-radius: 0px;
        }

        .container {
            padding-right: 10px;
            padding-left: 10px;
        }

        .fixed-table-container thead th:first-child {

            border-top-left-radius: 0px;
            -webkit-border-top-left-radius: 0px;

        }
        .eTitle{
            display: inline-block;
            border-radius: 10px;
            position: absolute;
            top:25%;
            padding:5px 10px;
            z-index: 10;
        }
        .eMax{
            left:15%;
            background: -webkit-linear-gradient(left,#f79c00,#f7b17c); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(left,#f79c00,#f7b17c); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(left,#f79c00,#f7b17c); /* For Firefox 3.6 to 15 */
            background: linear-gradient(left,#f79c00,#f7b17c);
            color:#fff;
        }
        .eMin{
            left:60%;
            background: -webkit-linear-gradient(left,#3ed542,#5ef175); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(left,#3ed542,#5ef175); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(left,#3ed542,#5ef175); /* For Firefox 3.6 to 15 */
            background: linear-gradient(left,#3ed542,#5ef175);
            color:#fff;
        }
        #timeSelect{
            position: relative;
            width:200px;
            height:30px;
            border-radius: 5px;
            box-shadow: 0px 1px 1px rgba(0,0,0,.3);
            z-index: 2;
        }
        #timeSelect option{
            text-align: center;
        }
        body{
            background: -webkit-linear-gradient(top,#259df7,#e0f4fe); /* For Safari 5.1 to 6.0 */
            background: -o-linear-gradient(top,#259df7,#e0f4fe); /* For Opera 11.1 to 12.0 */
            background: -moz-linear-gradient(top,#259df7,#e0f4fe); /* For Firefox 3.6 to 15 */
            background: linear-gradient(top,#259df7,#e0f4fe);

        }
        table{
            background:#eff7ff!important;
        }
    </style>


</head>
<body>
<div class="container" style="height: 100%;width: 100%;overflow-x: hidden">
    <div class="row" style="height: 10%; text-align: center;padding:0 10px 5px 10px; ">

        <div class="row" style="height: 90%;position: relative;top:0;left:0;z-index: 10;padding-top:15px;box-shadow:0 1px 2px rgba(255,255,255,.3)">
            <div style="width:100%;position: absolute; ">

                        <span style="float: left;margin-left: 10%;color:#fff;">
                            <svg class="icon" aria-hidden="true" style="background-image: url(../imgs/rank.png);background-size: 100% 100%">

                                <!--　　  <use xlink:href="#icon-qushitu"></use>-->
                            </svg>
                        </span>
                <span style="float: left;font-size: large;margin-left: 0.857em;color:#fff;" id="youqushi">实时追踪</span>

            </div>

        </div>

    </div>
    <div class="row" class="" style="height: 90%;text-align: center;">
        <!--仪表盘-->
        <div class="row" style="position:relative;margin:-5em 0 1em 0;width:100%;height:55%;overflow: hidden;box-shadow:0 1px 5px rgba(255,255,255,.3)">
            <div class="eTitle eMax" >最大值 <span id="maxzhi"></span></div>
            <div class="eTitle eMin" >最小值 <span id="minzhi"></span></div>
            <div id="echart1" style="height:100%;width: 100%;z-index: 1;"></div>
        </div>
        <!--折线图-->
        <div class="row"><span style="margin-right:10px;color:#fff;">数据时段</span><select name="" id="timeSelect">

        </select>
        </div>
        <div class="row" style="height:40%;margin-top: -2em;">

            <div id="echart2" style="height:100%;width: 99%;z-index: 1"></div>
        </div>
        <!--table-->
        <div class="row" style="height: 45%;position: relative;">
            <div style="width:100%;position: absolute;padding: 10px 30px 0px 30px; ">
                <table id="table1"></table>
            </div>
        </div>

    </div>
</div>
</body>


<script type="text/javascript">
    
    function getQueryString(name) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
    
    $(document).ready(function () {
        //alert($(window).height()); //浏览器当前窗口可视区域高度
        //alert($(document).height()); //浏览器当前窗口文档的高度
        document.getElementsByTagName('body')[0].style.height = $(window).height() + 'px';
        document.getElementsByTagName('body')[0].style.width = $(window).width() + 'px';
        //var jsons = '{"cityName":"长沙","s_id":"B10I00149"}';

        var purl = "http://111.8.20.247:89/api/apph5api/";
        var apiUrl = purl + "getkeywherep";
        var indid = getQueryString("s_id");
        var cityname = decodeURI(escape(getQueryString("cityName")));
                      
        //var H=jsons.H;
        var detailurl = purl + "GetMinWhereIdetailcity" ;
        //var detailurl = purl + "GetMinWhereIdetailcity?CITY_NAME=" + cityname + "&S_id=" + indid + "&H=" + H ;
        ///长沙&S_id=B10I00149&H=1&callback=11
        var urldetail = purl + "GetMinTopWhereIdetailcity?CITY_NAME="+cityname+ "&S_id="+indid;
//        var json1={};
//        json1.url=urldetail;
//        json1.data={"cityName":"长沙","s_id":"B10I00149","H":"1"}
        /*获取当前时间*/
            getTimeSelect();
            getData();//仪表盘
            getData1();//折线图
        $("#timeSelect").change(function(){
            getData1();
            return;
        })
//        function getData(getJson) {
//            alert(1)
//            $.get(getJson.url,getJson.data,function(result){
//                console.log(result);
//            },"json");
//        }
/*仪表盘数据*/
        function getData() {
            $.ajax({
                type: "GET",
                url: urldetail,
                dataType: "jsonp",
                success: function (res) {
                    console.log(res,"res")
                    showEchart1(res.result);
                    $("#maxzhi").html(res.result.inD_DATA_MAX);
                    $("#minzhi").html(res.result.inD_DATA_MIN);
                }
            });
        }
        /*获得表格和折线图数据*/
        function getData1() {
            var mydata={};
            mydata.CITY_NAME=cityname;
            mydata.S_id=indid;
            mydata.H=$("#timeSelect").val();
            console.log(mydata)
            $.ajax({
                type: "GET",
                url: detailurl,
                data: mydata,
                dataType: "jsonp",
                success: function (data) {
                    console.log(data,"data")
                    debugger
                    loadData(data.result);
                }
            });
        }
        /*展示折线图数据*/
        function loadData(data1) {
            var data = data1;
            // table
            $("#table1").bootstrapTable('destroy');
            echarts.dispose(document.getElementById('echart2'));
            var tableData = new Array();
            for(var i=0;i<data.length;i++){
                tableData[i]=data[i];
            }
            tableData.reverse();
            var day=data[0].time.split(" ")[0].substring(5);
            console.log(tableData,"rowss")
                    $("#table1").bootstrapTable({
                        data: tableData,
                        classes: "table table-hover table-no-bordered table-striped",
                        search: false,
                        pagination: false,
                        showColumns: false,
                        showRefresh: false,
                        showToggle: false,
                        locale: "zh-CN",

                        striped: true,
                        columns: [//color:#A4A4A4
                            {
                                field: "time", title: "时间", width: "40%", height: '36',
                                align: "center",
                                formatter: function
                                        (value, row, index) {
                                    console.log(row,"rwo")
                                        var change = day+" "+row.time.split(" ")[1].split(":").slice(0,2).join(":");
                                        return change;
                                }
                            },
                            {
                                field: "inD_DATA",
                                title: "指标值",
                                width: "30%",
                                align: "center",
                                formatter: function (value, row, index) {
                                    /*if (row.inD_DATA > yMaxDalue) {
                                        yMaxDalue = Math.ceil(row.inD_DATA);
                                    }*/
                                    return row.inD_DATA;
                                }
                            },
                            {
                                field: "lasttime_data",
                                title: "环比",
                                width: "30%",
                                align: "center",
                                formatter: function (value, row, index) {
                                    console.log(row.sorT_ID,"sort")
                                    if(row.sorT_ID == 0){


                                        if(parseFloat(row.lasttime_data) < 0){
                                            row.lasttime_data ='<span style = "color:#FF0000; " >'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1-copy-copy"></use> </svg></span>';

                                        }else if(parseFloat(row.lasttime_data) >0){
                                            row.lasttime_data ='<span style="color:#6EFB78;" >'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1"></use> </svg></span>';
                                        }else if(parseFloat(row.lasttime_data) ==null){
                                            row.lasttime_data = 0;
                                        }
                                        return row.lasttime_data;


                                    }
                                    else {


                                        if(parseFloat(row.lasttime_data) < 0){


                                            row.lasttime_data ='<span style="color:#6EFB78;" >'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1"></use> </svg></span>';
                                        }else if(parseFloat(row.lasttime_data) >0){
                                            row.lasttime_data ='<span style="color:#FF0000; ">'+row.lasttime_data+'<svg class="icon" aria-hidden="true" style="font-size: 15px;"> <use xlink:href="#icon-jiantou1-copy-copy"></use> </svg></span>';

                                        }else if(row.lasttime_data ==null){
                                            row.lasttime_data = 0;
                                        }
                                        return row.lasttime_data;



                                    }

                                }
                            }
                        ],
                        onPostHeader: function () {
                            //修改表格背景颜色
                            var ths = document.getElementsByTagName('th');
                            for (var i = 0; i < ths.length; i++) {
                                ths[i].style.backgroundColor = '#169BFA';
                                ths[i].style.backgroundImage = 'none';

                            }
                        }
                    });
                    // echart
                    // xAxis yAxis data
                    var xData = [];
                    var yData = [];
                    var formateTime = "";
                   $(data).each(function(index,item){
                       formateTime="";
                       yData.push(item.inD_DATA);
                       formateTime=item.time.split(" ")[1].split(":").slice(0,2).join(":");
                       xData.push(formateTime);
                   })

                        var myChart2=echarts.init(document.getElementById('echart2'));
                        var startPercent = xData.length>10 ? 50:0
                        var endPercent = xData.length >12? 100:100;
                        var MaxDa = (yData&&yData.length>0)?Math.max.apply(null,yData):0;
                        var MinDa=(yData&&yData.length>0)?Math.min.apply(null,yData):100;
                        option = {
                            tooltip: {
                                show: true,
                                trigger: 'axis',
                            },
                            grid: {
                                x : "20%",
                                right:'5%',
                                width:'70%',
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: xData,
                                axisLine: {
                                    show: false
                                },
                                axisLabel: {
                                    interval: 0,
                                    rotate: 45
                                },
                                splitLine: {
                                    show: false
                                }
                            },
                            yAxis: {
                                type: 'value',
                                min: MinDa,
                                max:MaxDa,
                                //interval: Middle,
                                splitNumber: 1,
                                splitLine: {
                                    show: true,
                                    lineStyle: {
                                        type: 'solid',
                                        color: '#d4d4d4',//左边线的颜色
                                        opacity: 0.2,
                                        width: '1'//坐标线的宽度
                                    }
                                },//去除网格线
                                axisLine: {
                                    show: false
                                }
                            },
                            dataZoom: [//给x轴设置滚动条

                                {
                                    type: 'inside',
                                    show: true,
                                    zoomLock: true,
                                    xAxisIndex: [0],
                                    start: startPercent,//默认为1
                                    end: endPercent
                                }
                            ],
                            series: [{
                                data: yData,
                                smooth: true,
                                type: 'line',
                                symbol: 'circle',
                                //symbolSize:10,
                                lineStyle: {
                                    //color: '#79C5FC'
                                    color:"#fff",
                                },
                                itemStyle: {
                                    color:"#fff",
                                },
                                areaStyle: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: 'rgba(255,255,255,.8)' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: 'rgba(255,255,255,0)' // 100% 处的颜色
                                        }],
                                        globalCoord: false // 缺省为 false
                                    }
                                },
                            }]
                        };

                    myChart2.setOption(option);
            }
    });
    function getTimeSelect(){

        var timeArr=[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
        var timeOption='';
        var nextTime='';
        var preTime='';
        var myDate= new Date();
        var nowTime = "";
        var preNowTime="";
        myDate.getHours();
        myDate.getMinutes();
        var myPreTime=new Date(new Date().getTime() - 1 * 60 * 60 * 1000);
        nowTime = toTwo(myDate.getHours())+":"+toTwo(myDate.getMinutes());
        preNowTime = toTwo(myPreTime.getHours())+":"+toTwo(myDate.getMinutes());
        $("#timeSelect").empty().append("<option value='24'>当前1小时</option>");
        for(var i=0;i<timeArr.length-1;i++){
            preTime="";
            if(timeArr[i]==24){
                timeArr[i]=0;
            }
            nextTime=timeArr[i]+1;
            if(timeArr[i]<10){
                preTime="0"+timeArr[i];
            }else{
                preTime=timeArr[i];
            }
            if(nextTime<10){
                nextTime="0"+nextTime;
            }
            timeOption += "<option value='"+timeArr[i]+"'>"+preTime+":00-"+nextTime+":00</option>"
        }
        $("#timeSelect").append(timeOption);
    }
    function toTwo(num){
        if(num<10){
            num="0"+num;
        }
        return num;
    }
    function showEchart1(data){
        echarts.dispose(document.getElementById('echart1'));
        var yibiaoOption = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            toolbox: {
                show : false,
                feature: {
                    restore: {},
                    saveAsImage: {}
                }
            },
            backgroundColor:"transparent",
            series: [
                {
                    radius : "90%",
                    startAngle: 180,
                    endAngle: 0,
                    name: '业务指标',
                    type: 'gauge',
                    center : ['50%', '85%'],
                    splitLine:{
                        show:true,
                        length: 25,
                    },
                    axisLabel: {
                        show:true,
                        color:"#fff",
                    },
                    axisTick: {// 坐标轴小标记
                        show:true,
                        splitNumber: 5,   // 每份split细分多少段
                        length :15,        // 属性length控制线长
                    },
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式#88d88c
                            width: 3,
                            color: [[0.09, 'lime'], [0.80, 'white'], [1, '#f79c00']],
                            shadowColor : '#fff', //默认透明
                            shadowBlur: 20

                        },
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            color: '#fff',
                            fontSize: 11,
                            fontWeight: 'bolder'
                        }
                    },
                    title : {
                        show : true,
                        offsetCenter: [0, '-80%'],       // x, y，单位px
                        color: '#fff',
                        fontSize: 20
                    },
                    detail: {
                        show : true,
                        backgroundColor: 'rgba(0,0,0,0)',
                        borderWidth: 0,
                        borderColor: '#ccc',
                        width: 100,
                        height: 40,
                        offsetCenter: [0, '15%'],       // x, y，单位px
                        formatter:'{value}',
                             // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                        fontSize : 30

                    },
                    pointer:{
                        show:true,
                        width:5,
                    },
                    data: [{value: data.inD_DATA_NEW, name: ''}]
                }
            ]
        };
        var myChart = echarts.init(document.getElementById('echart1'));
        myChart.setOption(yibiaoOption);
    }


</script>
</html>

